<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" href="../lib/resources/css/ext-all.css"/>
        <script type="text/javascript" src="../lib/js/ext-base-debug.js">
        </script>
        <script type="text/javascript" src="../lib/js/ext-all-debug.js">
        </script>
		<!-- ENDLIBS -->
        <script type="text/javascript" src="JsonTreeLoader.js">
        </script>
    </head>
    <body>
        <script type="text/javascript">
			
            Ext.onReady(function(){
                var view = new Ext.Viewport({
                    renderTo: Ext.getBody(),
                    layout: 'border',
                    items: [{
                        region: 'west',
                        id: 'myTree',
                        collapsible: true,
                        title: 'Navigation',
                        xtype: 'treepanel',
                        width: 200,
                        margins: '0 0 0 5',
                        autoScroll: true,
                        split: true,
                        useArrows: true,
                        loader: new Ext.ux.tree.JsonTreeLoader({//这里配下就行了
                            root: 'menus',
                            dataUrl: 'menu.json'
                        }),
                        rootVisible: false,
                        root: new Ext.tree.AsyncTreeNode(),
                        listeners: {
                            click: function(n){
                                Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.url + '"');
                            },
							afterlayout:function(tree){
								//tree.expandAll();
							}
                        }
                    }, {
                        region: 'center',
                        xtype: 'tabpanel'
                    }]
                });
            });
        </script>
    </body>
</html>
